<template>
  <div>
    <el-dialog
      v-model="viewVisible"
      width="60%"
      top="10vh"
      :title="payfooyear + '清缴记录'"
      :close-on-click-modal="false"
      @close="handlecloseView"
    >
      <el-form>
        <el-form-item>
          <div class="container">
            <div class="alldataList" v-if="PayOffList.length > 0">
              <div
                class="
                  displayflex
                  space-between
                  border-dashed-bottom
                  padding20
                  alldataItem
                "
                v-for="(item, index) in PayOffList"
                :key="index"
              >
                <div>
                  抵销{{ item.carbonAmount }}吨碳排量
                  <!-- <div class="fontSize14 color999 lineHeight30">
                    {{ item.date }}
                  </div> -->
                </div>
                <div v-if="item.state == 0" style="color: rgb(81, 126, 209)">
                  待审核
                </div>
                <div v-if="item.state == 1" style="color: rgb(81, 209, 102)">
                  已通过
                </div>
                <div v-if="item.state == -1" style="color: red">已拒绝</div>
                <div>{{ item.createTime }}</div>
                <div>{{ item.reason }}</div>
              </div>
            </div>
            <div v-else>暂无数据</div>
          </div>
          <div class="btn_b">
            <el-button type="primary" @click="handlecloseView">返回</el-button>
          </div></el-form-item
        >
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { ref, reactive } from "vue";
import api from "../api/api";
export default {
  components: {},
  setup(props, context) {
    console.log(context);
    // 参考图片
    const viewVisible = ref(context.attrs.viewVisible);
    const PayOffList = ref(context.attrs.PayOffList);
    const payfooyear = ref(context.attrs.payfooyear);
    const handlecloseView = () => {
      viewVisible.value = false;
      context.emit("handlecloseView", viewVisible.value);
    };
    return { payfooyear, viewVisible, PayOffList, handlecloseView };
  },
};
</script>

<style lang="less" scoped>
@import "../assets/css/common.css";
&:deep(.el-dialog) {
  box-shadow: none;
}
&:deep(.el-dialog__headerbtn .el-dialog__close) {
  color: #909399;
  background: #fff;
  width: 30px;
  height: 30px;
  border-radius: 360px;
  font-size: 30px;
}
&:deep(.el-form-item__content) {
  text-align: center;
}
&:deep(.el-input__inner) {
  width: 150px !important;
}
.btn_b {
  padding: 30px;
}
.container {
  width: 95%;
  margin: 0 auto;
  margin-left: 30px;
  margin-top: 30px;
  margin-bottom: 30px;
  padding: 0;
}
.alldataList {
  width: 100%;
  height: 400px;
  overflow: auto;
}
.alldataItem > div {
  width: 150px;
}
</style>
